<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script>
        function addUser(){
            //创建上传文件的对象
            let formObj=new FormData();
            //添加表单数据
            formObj.append("userName",$("userName").value);
            formObj.append("face",$("faceImg").files[0]);
            //设置请求头
            let config = {
                headers: {'Content-Type': 'multipart/form-data' }
            }
            axios.post("/user/add",formObj,config).then(resp=>{
                if (resp.data=="ok"){
                    alert("添加成功")
                }
            })
        }
        function fileChange(){
            var reader = new FileReader();//定义文件读取流对象
            reader.readAsDataURL($("faceImg").files[0]);
            reader.onload = function (ev) {
                $("facePic").src = ev.target.result;
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" id="userName"><br>
<img src="" alt="" id="facePic" width="200" height="200" ><br>
头像：<input type="file" id="faceImg" onchange="fileChange()"><br>
<input type="button" value="添加" onclick="addUser()">
</body>
</html>